<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>教师界面</title>
    <style>
        body {
            background-color: #f1f1f1;
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        h2 {
            color: #333;
        }

        .tabs {
            list-style: none;
            padding: 0;
            margin-bottom: 20px;
        }

        .tabs li {
            display: inline-block;
            margin-right: 10px;
        }

        .tabs li a {
            display: inline-block;
            padding: 10px 15px;
            background-color: #ddd;
            color: #333;
            text-decoration: none;
            border-radius: 3px;
        }

        .tabs li a.active {
            background-color: #4caf50;
            color: #fff;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .question-list {
            list-style: none;
            padding: 0;
        }

        .question-list li {
            margin-bottom: 10px;
        }

        .question-list li .question {
            font-weight: bold;
        }

        .question-list li .answer {
            color: #777;
        }

        .question-list li .edit-button {
            margin-left: 10px;
            padding: 4px 8px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .question-list li .edit-button:hover {
            background-color: #45a049;
        }

        .question-list li .edit-form {
            display: none;
            margin-top: 10px;
        }

        .question-list li .edit-form input[type="text"] {
            width: 100%;
            padding: 4px;
        }

        .question-list li .edit-form button {
            margin-top: 10px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tbody tr:hover {
            background-color: #e9e9e9;
        }

        /* Centering specific sections */
        #tab2, #tab3 ,#tab4{
            text-align: center;
        }

        #tab2 table,
        #tab3 table,
        #tab4 table{
            margin: 0 auto;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>教师界面</h2>

        <ul class="tabs">
            <li><a href="#tab1" class="tab-link active">查看题库</a></li>
            <li><a href="#tab2" class="tab-link">查看所有考试</a></li>
            <li><a href="#tab3" class="tab-link">查看所有用户详细信息</a></li>
            <li><a href="#tab4" class="tab-link">查看所有考试成绩</a></li>
        </ul>

        <div id="tab1" class="tab-content active">
                    <ul class="question-list">
              <li>
                 <button id="add-question-button" class="edit-button">添加题目</button>
                    <form class="edit-form" action="/add_question" method="POST">
                        <input type="text" name="type" value="题型">
                        <input type="text" name="content" value="题目内容">
                        <input type="text" name="options" value="选项">
                        <input type="text" name="answer" value="答案">
                        <input type="text" name="difficulty" value="难度（1~9）">
                        <button type="submit">保存</button>
                    </form>
              </li>
          </ul>
          <ul class="question-list">
                {% for question in questions %}
                <li>
                    <div class="type">题目&ensp;I&ensp;D：{{ question.id }}</div>
                    <div class="type">题&ensp;&ensp;&ensp;&ensp;型：{{ question.type }}</div>
                    <div class="content">题目内容：{{ question.content }}</div>
                    <div class="options">选择题选项：{{ question.options }}</div>
                    <div class="answer">答&ensp;&ensp;&ensp;&ensp;案：{{ question.answer }}</div>
                    <div class="difficulty">难&ensp;&ensp;&ensp;&ensp;度：{{ question.difficulty }}</div>
                    <button class="edit-button">编辑</button>
                    <button class="delete-button">删除</button>
                    <form class="edit-form" action="/teacher" method="POST">
                        <input type="hidden" name="question_id" value="{{ question.id }}">
                        <input type="text" name="edited_type" value="{{ question.type }}">
                        <input type="text" name="edited_content" value="{{ question.content }}">
                        <input type="text" name="edited_options" value="{{ question.options }}">
                        <input type="text" name="edited_answer" value="{{ question.answer }}">
                        <input type="text" name="edited_difficulty" value="{{ question.difficulty }}">
                        <button type="submit">保存</button>
                    </form>
                </li>
                {% endfor %}
            </ul>
        </div>

        <div id="tab2" class="tab-content">
            <table>
                <thead>
                    <tr>
                        <th>考试名称（exam+用户名）</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>关联考题（考题的id）</th>
                    </tr>
                </thead>
                <tbody>
                    {% for exam in exams %}
                    <tr>
                        <td>{{ exam.title }}</td>
                        <td>{{ exam.start_time }}</td>
                        <td>{{ exam.end_time }}</td>
                        <td>{{ exam.questions }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div id="tab3" class="tab-content">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>姓名</th>
                        <th>电子邮箱</th>
                        <th>注册日期</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>{{ user.id }}</td>
                        <td>{{ user.username }}</td>
                        <td>{{ user.name }}</td>
                        <td>{{ user.email }}</td>
                        <td>{{ user.registration_date }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="tab4" class="tab-content">
            <table>
                <thead>
                    <tr>
                        <th>学生id</th>
                        <th>考试id</th>
                        <th>分数</th>
                    </tr>
                </thead>
                <tbody>
                    {% for score in scores %}
                    <tr>
                        <td>{{ score.student_id }}</td>
                        <td>{{ score.exam_id }}</td>
                        <td>{{ score.score }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

    </div>

    <script>
        const tabLinks = document.querySelectorAll('.tab-link');
        const tabContents = document.querySelectorAll('.tab-content');

        tabLinks.forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();

                tabLinks.forEach(function(link) {
                    link.classList.remove('active');
                });
                tabContents.forEach(function(content) {
                    content.classList.remove('active');
                });

                const target = link.getAttribute('href');
                link.classList.add('active');
                document.querySelector(target).classList.add('active');
            });
        });

        const editButtons = document.querySelectorAll('.edit-button');
        const editForms = document.querySelectorAll('.edit-form');

        editButtons.forEach(function(button, index) {
            button.addEventListener('click', function() {
                editForms[index].style.display = 'block';
            });
        });
        const deleteButtons = document.querySelectorAll('.delete-button');

        deleteButtons.forEach(function(button, index) {
            button.addEventListener('click', function() {
                const questionId = button.parentElement.querySelector('input[name="question_id"]').value;
                if (confirm('确定要删除此题目吗？')) {
                    // 发送AJAX请求来处理删除操作
                    fetch('/delete_question/' + questionId, {
                        method: 'DELETE'
                    })
                    .then(response => {
                        if (response.ok) {
                            // 刷新页面
                            location.reload();
                        } else {
                            alert('删除失败');
                        }
                    })
                    .catch(error => {
                        console.error('删除请求错误:', error);
                        alert('删除请求错误');
                    });
                }
            });
        });
    </script>
</body>
</html>
